<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度音乐盒</title>
    <style>
        h2 {
            margin: 0 0 10px;
        }

        .main {
            width: 300px;
            margin: 30px auto;
            border: 1px solid #ccc;
            padding: 10px 20px;
        }
    </style>
    <script>
        window.onload=function () {
            // 获取对象
            let inputArr = document.getElementById("box").getElementsByTagName("input");
            // 全选
            document.getElementById("btn1").onclick=function (){
                // 遍历 inputArr
                for (let i = 0; i < inputArr.length; i++) {
                    inputArr[i].checked=true;
                }
            }
            // 全否
            document.getElementById("btn2").onclick=function () {
                for (let i = 0; i < inputArr.length; i++) {
                    inputArr[i].checked=false;
                }
            }
            // 反选
            document.getElementById("btn3").onclick=function (){
                for (let i = 0; i < inputArr.length; i++) {
                    if (inputArr[i].checked==true){
                        inputArr[i].checked=false;
                    }
                    else {
                        inputArr[i].checked=true;
                    }
                }
            }
            // 播放
            document.getElementById("btn4").onclick=function () {
                // 创建一个歌曲名数组
                const music=["爱你一万年", "北京 北京", "海阔天空", "老司机等等我", "蓝精灵", "猴哥", "一路上有你", "至少还有你", "十年", "童话", "死了都要爱"];
                // 创建一个播放数组
                const playMusic=[];
                // 遍历 inputArr 将所有的选中的歌曲添加进入播放数组
                for (let i = 0; i < inputArr.length; i++) {
                    if (inputArr[i].checked==true){
                        // 添加
                        playMusic.push(music[i]);
                    }
                }
                // 遍历 playMusic
                for (let i = 0; i < playMusic.length; i++) {
                    console.log("正在播放:"+playMusic[i]);
                }
            }
        }
    </script>
</head>
<body>
<div class="main">
    <h2>百度音乐盒</h2>
    <input type="button" id="btn1" value="全选">
    <input type="button" id="btn2" value="全否">
    <input type="button" id="btn3" value="反选">
    <input type="button" id="btn4" value="播放">
    <hr>
    <div id="box">
        <input type="checkbox" name="music" value="0"> 爱你一万年 <br>
        <input type="checkbox" name="music" value="1"> 北京 北京 <br>
        <input type="checkbox" name="music" value="2"> 海阔天空 <br>
        <input type="checkbox" name="music" value="3"> 老司机等等我 <br>
        <input type="checkbox" name="music" value="4"> 蓝精灵 <br>
        <input type="checkbox" name="music" value="5"> 猴哥 <br>
        <input type="checkbox" name="music" value="6"> 一路上有你 <br>
        <input type="checkbox" name="music" value="7"> 至少还有你 <br>
        <input type="checkbox" name="music" value="8"> 十年 <br>
        <input type="checkbox" name="music" value="9"> 童话 <br>
        <input type="checkbox" name="music" value="10"> 死了都要爱 <br>
    </div>
</div>
</body>
</html>